<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Graphics</title>
</head>

<body>
  <h1>Graphics</h1>
  <canvas id="world" width="500" height="300"></canvas>
  <script src="../dist/stage.js"></script>
  <script>
    const stage = new stg.Stage('world');
    const graphics = new stg.Graphics();
    const PI2 = Math.PI * 2;
    graphics.lineWidth = 5;

    graphics.strokeStyle = '#903';
    graphics.fillStyle = '#F08';

    graphics.beginPath();
    graphics.arc(0, 0, 50, 0, PI2, false);
    graphics.stroke();
    graphics.fill();

    graphics.strokeStyle = '#903';
    graphics.beginPath();
    graphics.arc(-20, -25, 8, Math.PI, 0, false);
    graphics.stroke();

    graphics.beginPath();
    graphics.arc(20, -25, 8, Math.PI, 0, false);
    graphics.stroke();

    graphics.beginPath();
    graphics.arc(0, 15, 20, Math.PI, 0, true);
    graphics.stroke();

    graphics.fillStyle = '#903';
    graphics.beginPath();
    graphics.arc(-20, -10, 8, 0, PI2, false);
    graphics.arc(20, -10, 8, 0, PI2, false);
    graphics.fill();

    graphics.fillStyle = '#FFF';
    graphics.beginPath();
    graphics.arc(-22, -12, 3, 0, PI2, false);
    graphics.arc(18, -12, 3, 0, PI2, false);
    graphics.fill();

    const shape1 = new stg.Shape(graphics);
    shape1.x = 60;
    shape1.y = 60;

    const shape2 = new stg.Shape(graphics);
    shape2.x = 200;
    shape2.y = 100;
    shape2.scaleX = 1.5;
    shape2.rotate = 0.3;

    const shape3 = new stg.Shape(graphics);
    shape3.x = 350;
    shape3.y = 150;
    shape3.scaleY = 1.5;
    shape3.rotate = -0.5;

    const shape4 = new stg.Shape(graphics);
    shape4.x = 60;
    shape4.y = 150;
    shape4.scaleX = 0.3;
    shape4.scaleY = 0.3;
    shape4.rotate = Math.PI;

    stage.addChild(shape1);
    stage.addChild(shape2);
    stage.addChild(shape3);
    stage.addChild(shape4);
    stage.update();
  </script>
</body>

</html>